<template>
  <div class="p-8 space-y-4">
    <h2 class="text-2xl font-bold mb-4">Toast 通知示例</h2>
    
    <div class="grid grid-cols-2 gap-4">
      <button @click="showSuccess" class="btn btn-success">
        成功通知
      </button>
      
      <button @click="showError" class="btn btn-danger">
        错误通知
      </button>
      
      <button @click="showWarning" class="btn btn-outline">
        警告通知
      </button>
      
      <button @click="showInfo" class="btn btn-primary">
        信息通知
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
const toast = useToast()

const showSuccess = () => {
  toast.success('操作成功！')
  // 或者带标题
  // toast.success({ title: '成功', message: '数据已保存', duration: 3000 })
}

const showError = () => {
  toast.error('操作失败，请重试')
}

const showWarning = () => {
  toast.warning('请注意数据格式')
}

const showInfo = () => {
  toast.info('这是一条信息提示')
}
</script>

